<template>
	<div class="wrapper">
		<v-head :voltData="voltData" :currData='currData' :modelParameterData='textContent'></v-head>
		<v-sidebar></v-sidebar>
		<div ref='content' class="content-box">
			<div class="content" data-step="5" data-intro="这里是试验台!">
				<component-dialog :dialogVisible="dialogVisible" :dialogInfo="dialogInfo" :chargeModel="chargeModel"
				 @update:dialogVisible="dialogVisibles"></component-dialog>
				<div id="sample" style="height:100%">
					<div id="parentDiv">
						<!-- <button @click="handleClick()">click</button> -->
						<!-- <button @click='saveData()'>save</button> -->
						<input id="file" type="file" accept=".json" @change="importJSON" style="display: none;" />
						<!-- <el-button type="primary">日运行情况</el-button> -->
						<div id="myDiagramDiv" :on-run="run" :on-stop="stop" :on-heat="heatmapinit" style="border: solid 1px black; width:100%; height:96%; display: inline-block; vertical-align: top"></div>
						<!-- 右击菜单 -->
						<ul id="contextMenu" class="ctxmenu">
							<li id="cut" ref='cut' class="menu-item" @click="cxcommand('cut')">剪切</li>
							<li id="copy" ref='copy' class="menu-item" @click="cxcommand('copy')">复制</li>
							<li id="paste" ref='paste' class="menu-item" @click="cxcommand('paste')">粘贴</li>
							<li id="delete" ref='delete' class="menu-item" @click="cxcommand('delete')">删除</li>
							<li id="rotate" ref='rotate' class="menu-item" @click="cxcommand('rotate')">旋转</li>
						</ul>
						<ul id="confirm" v-show="$route.fullPath == '/home?id=2'">
							<li>请双击进入电动汽车实验</li>
						</ul>
					</div>
					<div>
						<textarea id="mySavedModel" style="width: 800px; height: 400px;display: none;" v-model="textContent"></textarea>
					</div>
					<div v-show="$route.fullPath == '/home?id=0'" class="legend" @click="showLegend;dialogInformation=!dialogInformation"></div>
					<el-dialog v-dialogDrag title="参考图" class='' :visible.sync="dialogInformation">
						<img style="width:80%;margin-left:10%" src="../../assets/img/home/111.png" alt="">
					</el-dialog>
				</div>
			</div>
		</div>
		<div id="result" hidden>456546</div>
		<v-rightside :icon="icon" :text="text" :keyValue="keyValue" :pos='pos' :isEdit='isEdit' :modelParameterData="modelParameterData"
		 @modelArray="getModelParameter" @linkArray='getLinkArray'></v-rightside>
	</div>
</template>

<script>
	import '../../assets/js/dialog.js';
	import {
		InitCallback,
		UploadAsBinaryString,
		TaskRequest,
		GetDownloadUrl
	} from '../../assets/js/vsccsp2.0.0.min.js';
	import bus from '../../assets/js/bus.js'
	import router from '../../router/index.js';
	import jsonData from '../../assets/json/tuopu.json';
	import componentDialog from "./dialog";
	import vHead from './Header.vue';
	import vSidebar from './Sidebar.vue';
	import vRightside from './Rightside.vue';
	import Heatmap from '../../assets/js/heatmap.js';
	import axios from 'axios';
	import {
		deviceParam
	} from '../../assets/js/deviceParameters.js';
	import {
		aplayerStr,
		bplayerStr,
		cplayerStr
	} from '../../assets/js/aplayer.js';
	import '../../assets/js/CalculationSDK.js';
	import {
		setmapValue
	} from '../../assets/js/heatmap.js';
	var $ = go.GraphObject.make;
	import FileSaver from 'file-saver';
	export default {
		data() {
			return { //控制弹窗 显示
				dialogVisible: false,
				dialogInformation: false,
				//点击查看按钮  这条数据详细信息
				dialogInfo: {},
				chargeModel: "有序充电模式",
				isRun: false, //电路图是否流动
				isEdit: 'true',
				loading: null,
				heatmapshow: false, //热力图是否展示
				myDiagram: null,
				myPalette: null,
				icon: "",
				text: "",
				pos: '',
				modelParameterData: [], //单个元件的属性
				keyValue: "0",
				linkData: {},
				//图片
				icons: {
					vehicle: require("../../assets/img/sidebar/img/vehicle.png"),
					storage: require("../../assets/img/sidebar/img/storage.png"),
					load: require("../../assets/img/sidebar/img/load.png"),
					chargeStation: require("../../assets/img/sidebar/img/chargeStation.png"),
					biandian: require("../../assets/img/sidebar/img/biandian.png"),
					guidao: require("../../assets/img/sidebar/img/guidao.png"),
					node: require("../../assets/img/sidebar/img/node.png"),
					photovoltaic: require("../../assets/img/sidebar/img/photovoltaic.png"),
					capacitor: require("../../assets/img/sidebar/img/capacitor.png"),
					generator: require("../../assets/img/sidebar/img/generator.png"),
					transformer: require("../../assets/img/sidebar/img/transformer.png"),
					windPower: require("../../assets/img/sidebar/img/windPower.png"),
					duanlu: require("../../assets/img/sidebar/img/duanlu.png"),
				},
				nodes: {
					load: require("../../assets/img/home/nodes/load.png"),
					chargeStation: require("../../assets/img/home/nodes/2.png"),
					biandian: require("../../assets/img/home/nodes/6.png"),
					guidao: require("../../assets/img/home/nodes/guidao.png"),
					node: require("../../assets/img/home/nodes/node.png"),
					vehicle: require("../../assets/img/home/nodes/8.png"),
					storage: require("../../assets/img/home/nodes/4.png"),
					photovoltaic: require("../../assets/img/home/nodes/3.png"),
					capacitor: require("../../assets/img/home/nodes/12.png"),
					generator: require("../../assets/img/home/nodes/1.png"),
					transformer: require("../../assets/img/home/nodes/5.png"),
					windPower: require("../../assets/img/home/nodes/7.png"),
					duanlu: require("../../assets/img/home/nodes/duanlu.png"),
				},
				//动态数据控制连接顺序
				textContent: {},
				result: "",
				visible: false,
				voltData: [],
				currData: [],
			};
		},
		components: {
			vHead,
			vSidebar,
			// vNavlist,
			vRightside,
			componentDialog,
		},
		watch: {
			$route(to, from) {
				if (to.name == 'home' && to.query.id != '0') {
					this.showJsonData();
				} else if (this.$route.fullPath == '/home?id=0') {
					this.newMyDiagram();
				}
			},
		},
		created() {},
		mounted() {
			let _this = this;
			_this.init();
			_this.nodeStyle();
			_this.linkStyle();
			_this.myPaletteDiv();
			if (this.$route.fullPath != '/home?id=0') {
				_this.showJsonData();
			};
			setTimeout(function() {
				_this.load()
			}, 300)

		},
		methods: {
			// 展示默认拓扑图
			showJsonData() {
				// gojs 会改变 jsonData 内容，为了防止再次加载数据出错，这里需要拷贝一份数据
				this.myDiagram.model = go.Model.fromJson(clone(jsonData));
			},
			//展示图例
			showLegend() {
				console.log(1)
			},
			//弹窗子组件传 过来的 数据
			dialogVisibles(v) {
				this.dialogVisible = v
				console.log(v)
			},
			//帮助
			infor() {
				this.$intro().setOptions({
					prevLabel: "上一步",
					nextLabel: "下一步",
					skipLabel: "跳过",
					doneLabel: "完成",
					showBullets: false,
					showStepNumbers: false,
					hidePrev: true, //没有上一个步骤是否隐藏上一步按钮
					hideNext: true,
					overlayOpacity: 0.5,
					positionPrecedence: ["right", "left", "bottom", "top", ],
				}).oncomplete(() => {
					//点击结束按钮后执行的事件
				}).onexit(() => {
					//点击跳过按钮后执行的事件
				}).start()
			},
			toggleWidth() {
				this.$refs.content.style.right = "25px";
				this.$refs.content.style.transitionDuration = ".5s";
			},
			toggleWidth1() {
				this.$refs.content.style.right = "350px";
				this.$refs.content.style.transitionDuration = ".5s";
			},
			toggleWidth2() {
				this.$refs.content.style.left = "40px";
				this.$refs.content.style.transitionDuration = ".5s";
			},
			toggleWidth3() {
				this.$refs.content.style.left = "260px";
				this.$refs.content.style.transitionDuration = ".5s";
			},
			//新建画布
			newMyDiagram() {
				let textContent = {};
				this.myDiagram.model = go.Model.fromJson(textContent);
			},
			//保存数据
			saveData() {
				// 将json转换成字符串
				const data = JSON.stringify(this.textContent)
				const blob = new Blob([data], {
					type: ''
				})
				FileSaver.saveAs(blob, '图例.json')
			},
			//导入json
			importJSON() {
				const file1 = document.getElementById('file');
				file1.click()
				const file = document.getElementById('file').files[0]
				if (file) {
					const reader = new FileReader()
					reader.readAsText(file)
					const _this = this
					reader.onload = function() {
						// 检测是否导入成功
						_this.result = this.result;
						_this.myDiagram.model = go.Model.fromJson(this.result);
						_this.myDiagram.isModified = false;
					}
				}
			},
			//节点模型参数发生改变时
			getModelParameter(data) {
				console.log(data)
				let _this = this;
				_this.chargeModel = data[2].value;
				if (data[2].name == '充电模式') {
					_this.dialogVisible = true;
				}
				let keyValue = _this.keyValue;
				console.log(keyValue)
				let text = [];
				for (let i = 0; i < data.length; i++) {
					if (data[i].isShow != "否" && data[i].isShow != "") {
						text.push(data[i].value);
					}
				}
				let textContent = JSON.parse(JSON.stringify(_this.textContent));
				let nodeArray = textContent.nodeDataArray;
				for (let i = 0; i < nodeArray.length; i++) {
					if (nodeArray[i].key == keyValue) {
						console.log(nodeArray[i].key)
						nodeArray[i].text = text + '\n';
						nodeArray[i].modelParameter = data;
					}
				}
				// console.log(textContent)
				// _this.textContent = textContent;
				// console.log(_this.textContent)
				_this.myDiagram.model = go.Model.fromJson(textContent);
			},
			//获取连线数据
			getLinkArray(data) {
				let _this = this;
				let linkData = _this.linkData;
				let text = [];
				for (let i = 0; i < data.length; i++) {
					if (data[i].isShow == "是") {
						text.push(data[i].value);
					}
				}
				//判断连线是否相等
				function isObjectValueEqual(a, b) {
					if (a.from == b.from && a.to == b.to && a.fromPort == b.fromPort && a.toPort == b.toPort) {
						return true
					}
				};
				let textContent = JSON.parse(JSON.stringify(this.textContent));
				let linkArray = textContent.linkDataArray;
				for (let i = 0; i < linkArray.length; i++) {
					if (isObjectValueEqual(linkArray[i], linkData)) {
						linkArray[i].text = text + '\n';
						linkArray[i].modelParameter = data;
					}
				}
				console.log(data)
				textContent = JSON.parse(JSON.stringify(textContent))
				this.myDiagram.model = go.Model.fromJson(textContent);
			},
			//热力图
			heatmapinit() {
				this.heatmapshow = !this.heatmapshow;
				let isShow = this.heatmapshow;
				let str = JSON.parse(JSON.stringify(this.textContent));
				let nodepos = str.nodeDataArray;
				let array = [],
					posx = [],
					posy = [];
				for (let i = 0; i < nodepos.length; i++) {
					let pos = nodepos[i].pos.split(" ");
					array.push(pos)
				}
				for (let i = 0; i < array.length; i++) {
					posy.push(array[i][1]);
					posx.push(array[i][0]);
				}
				for (let i = 0; i < posx.length; i++) {
					var hotkey = Math.ceil(Math.random() * 3);
					setmapValue(isShow, posx[i], posy[i], hotkey);
				}
			},
			//电路动画开始
			run() {
				let _this = this;
				this.loading = this.$loading({
					lock: true,
					text: '开始远程计算...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let nodeArrayData = _this.textContent.nodeDataArray;
				let linkArrayData = _this.textContent.linkDataArray;
				let queryId = this.$route.query.id;
				let glmData = deviceParam(nodeArrayData, linkArrayData,queryId)
				UploadAsBinaryString(glmData, 'index.glm');
					
			},
			load() {
				let _this = this;
				var TaskIDs = {};
				const fileUploadCallback = (fileName, isSuccess, errorCode, errorInfo) => {
					if (!isSuccess) {
						// 错误处理
						switch (errorCode) {
							case 1:
								{
									console.log(fileName + '上传失败 请重新上传 ' + ' [errorCode] ' + errorCode + ' [错误原因] 文件信息有误');
									break;
								}
							case 2:
								{
									console.log(fileName + '上传失败 请重新上传 ' + ' [errorCode] ' + errorCode + ' [错误原因] 获取上传url失败');
									break;
								}
							default:
								{
									console.log(fileName + '上传失败 请重新上传 ' + ' [errorCode] ' + errorCode + ' [错误原因] 未知错误');
									break;
								}
						}
						return;
					}
					console.log(fileName + ' 上传成功');
					_this.aaaa()
				}

				const taskResponseCallback = (TaskID, IsSuccess, QueueNum, ErrorCode) => {
					console.log('--------------实验请求代理反馈--------------');

					var startTime = new Date();
					console.log("时间: " + startTime.toLocaleString());
					console.log('[TaskID] ' + TaskID);

					switch (IsSuccess) {
						case 0:
							{
								console.log('[实验请求是否成功] 否');
								break;
							}
						case 1:
							{
								console.log('[实验请求是否成功] 是');
								// 请求成功，将TaskID记录起来
								// 如果QueueNum===0, 就存为'正在计算', 反正没有类型
								if (QueueNum === 0) {
									TaskIDs[TaskID] = '正在计算';
								} else {
									TaskIDs[TaskID] = QueueNum;
								}
								break;
							}
						default:
							{
								console.log('[实验请求是否成功] 未知数字 ' + IsSuccess);
								break;
							}
					}
					switch (QueueNum) {
						case 0:
							{
								// 不打印
								console.log('任务已经开始计算')
								break;
							}
						default:
							{
								console.log('[排队人数] ' + QueueNum);
							}
					}
					switch (ErrorCode) {
						case 0:
							{
								// 无错误 不打印
								break;
							}
						case 1:
							{
								console.log(ErrorCode + ' 该实验达到并发上限');
								break;
							}
						case 2:
							{
								console.log(ErrorCode + ' 当前无可用算力');
								break;
							}
						case 3:
							{
								console.log(ErrorCode + ' 实验名称错误');
								break;
							}
						case 4:
							{
								console.log(ErrorCode + ' 本实验排队人数达到上限');
								break;
							}
						default:
							{
								console.log(ErrorCode + ' 未知错误');
								break;
							}
					}
					console.log('-------------------------------------------');
				}
				// 收到实验结束消息的回调
				// 由sdk-TaskRequest接口调用
				// 参数一 TaskID    : string 任务ID
				// 参数二 IsSuccess : int 0-失败 1-成功
				// 参数三 ErrorCode : int 
				//                   0-无错误
				// 参数四 FileNames : []string 
				//                   文件名称数组 
				//                   由计算引擎输出的文件，比如"result.png" "result.txt"
				const taskEndCallback = (TaskID, IsSuccess, ErrorCode, FileNames) => {
					console.log('------------------实验结束------------------');
					var startTime = new Date();
					console.log("时间: " + startTime.toLocaleString());
					console.log('[TaskID] ' + TaskID);


					if (!TaskIDs.hasOwnProperty(TaskID)) {
						console.log('本TaskID已经申请取消了');
						console.log('-------------------------------------------');
						return;
					}

					// 从 TaskIDs 中删除本 TaskID
					delete(TaskIDs[TaskID]);

					switch (IsSuccess) {
						case 0:
							{
								console.log('[实验请求是否成功] 否');
								break;
							}
						case 1:
							{
								console.log('[实验请求是否成功] 是');
								break;
							}
						default:
							{
								console.log('[实验请求是否成功] 未知数字 ' + IsSuccess);
							}
					}
					switch (ErrorCode) {
						case 0:
							{
								// 无错误 不打印
								break;
							}
						case 1:
							{
								console.log(ErrorCode + ' 计算引擎获取任务失败');
								break;
							}
						case 2:
							{
								console.log(ErrorCode + ' Worker服务器繁忙, 无可用算力');
								break;
							}
						case 3:
							{
								console.log(ErrorCode + ' 实验预置资源未完全同步');
								break;
							}
						case 4:
							{
								console.log(ErrorCode + ' 计算引擎启动失败');
								break;
							}
						case 5:
							{
								console.log(ErrorCode + ' 加载试验文件失败');
								break;
							}
						case 6:
							{
								console.log(ErrorCode + ' 计算超过设定时间');
								break;
							}
						case 7:
							{
								console.log(ErrorCode + ' 获取实验结果失败');
								break;
							}
						case 8:
							{
								console.log(ErrorCode + ' 任务处理异常, 计算引擎异常退出或心跳超时');
								break;
							}
						default:
							{
								console.log(ErrorCode + ' 未知错误');
								break;
							}
					}

					let _this = this;
					let filesData = [];
					// 将 Ngspice 返回的 ".raw"文件打印出来 
					for (var index in FileNames) {
						console.log(FileNames[index]);
						if (FileNames[index].endsWith('.csv')) {
							GetDownloadUrl(FileNames[index], (isSuccess, url, errorCode) => {
								if (!isSuccess) {
									console.log('获取下载url失败 [errorCode] :' + errorCode);
									// continue
									return
								}
								axios(url, {
									params: {}
								}).then(res => {
									filesData.push(res.data);
									console.log(filesData);
									_this.loading.close();
									_this.isRun = true;
									_this.isEdit = 'false';
									let isRun = _this.isRun;
									_this.linkAnimation(isRun)
								});
							})
						}
						
						if (FileNames[index].endsWith('.err')) {
							GetDownloadUrl(FileNames[index], (isSuccess, url, errorCode) => {
								if (!isSuccess) {
									console.log('获取下载url失败 [errorCode] :' + errorCode);
									// continue
									return
								}
								_this.loading.close();
								axios(url, {
									params: {}
								}).then(res => {
									if (res.data) {
										_this.$alert(res.data, null, '', {
											confirmButtonText: '确定',
											callback: action => {}
										});
									}
								});
							})
						}
					}
					// myParent.append(myText);
				}

				// 接口调用错误时的回调
				// 由sdk-TaskRequest接口调用
				// 参数一 errorCode : int 
				//                    1-websocket无法连接   
				// 参数二 errorInfo : string 具体错误信息  
				const taskErrorCallback = (ErrorCode, ErrorInfo) => {
					console.log('----------------接口调用错误----------------');
					var startTime = new Date();
					console.log("时间: " + startTime.toLocaleString());
					console.log('[错误代码] ' + ErrorCode);
					console.log('[错误信息] ' + ErrorInfo);
					console.log('-------------------------------------------');
				}
				// 查询某一任务当前排队位置时的回调
				// 由sdk-QueryQueueNum接口调用
				// 类型 function(TaskID, Num) => {}
				// 参数一 TaskID : string
				// 参数二 State  : int 该任务当前状态
				//                 1-该任务正在排队, 排队号码为Num
				//                 2-该任务正在计算
				//                 3-TaskID已结束或已过期
				//                 4-未知错误
				// 参数三 Num    : int 当前排队序号
				const queueNumQueryCallback = (TaskID, State, QueueNum) => {
					console.log('--------------查询排队号码完毕--------------')

					switch (State) {
						case 1:
							{
								// 正在排队 下面的逻辑处理
								break;
							}
						case 2:
							{
								// 正在计算 下面的逻辑处理
								break;
							}
						case 3:
							{
								// 查无此TaskID 不在任务队列中 也不在处理
								console.log('TaskID已结束或已过期 请刷新任务列表')
								delete(TaskIDs[TaskID]);
								return;
							}
						case 4:
							{
								// 后端发生了未知错误
								console.log('发生了未知错误 请重新申请计算并刷新任务列表')
								delete(TaskIDs[TaskID]);
								break;
							}
						default:
							{
								console.log('未知状态 ' + State);
								return;
							}
					}

					// 如果map中还存在这个key， 就更新
					if (TaskIDs.hasOwnProperty(TaskID)) {
						console.log('[TaskID] ' + TaskID);
						console.log('[QueueNum] ' + QueueNum + ' 正在计算')
						// 如果QueueNum===0, 就存为'正在计算', 反正没有类型
						if (QueueNum === 0) {
							TaskIDs[TaskID] = '正在计算';
						} else {
							TaskIDs[TaskID] = QueueNum;
						}
					} else {
						console.log('[TaskID] ' + TaskID + '已经结束')
					}
				}

				InitCallback(fileUploadCallback,
					taskResponseCallback,
					taskEndCallback,
					taskErrorCallback,
					queueNumQueryCallback,
					(isSuccess, errorCode) => {
						if (isSuccess) {
							console.log('绑定回调函数成功');
						} else {
							switch (errorCode) {
								case 1:
									{
										console.log('uploadCallback 函数类型错误 请检查代码');
										break;
									}
								case 2:
									{
										console.log('taskResponseCallback 函数类型错误 请检查代码');
										break;
									}
								case 3:
									{
										console.log('taskEndCallback 函数类型错误 请检查代码');
										break;
									}
								case 4:
									{
										console.log('taskErrorCallback 函数类型错误 请检查代码');
										break;
									}
								case 5:
									{
										console.log('queueNumQueryCallback 函数类型错误 请检查代码');
										break;
									}
								default:
									{
										console.log('未知错误');
										break;
									}
							}
						}
					});
			},
			aaaa() {
				const myOptions = {
					// 测试不同实验时 只需要修改ExpName即可 其他地方不用修改
					ExpName: 'bjtur201811095', // 实验名称
					TaskType: 2, // 实验类型
					// 3-ngspice
					StartCommand: '', // 引擎启动命令
					MainFile: 'index.glm', // 主文件名称
					TaskTimeLimit: 30, // 本次任务的计算超时时间
				};
				TaskRequest(myOptions);
			},
			// 处理csv数据
			CSV(csvString) {
				let data = [];
				let relArr = csvString.split("\r\n");
				if (relArr.length > 1) {
					let title = relArr[1].split(',');
					let title_arr = title.keys();
					for (let key = 1, len = relArr.length - 1; key < len; key++) {
						let values = relArr[key];
						let objArr = values.split(",");
						let obj = {};
						for (let i = 0; i < title.length; i++) {
							obj[title[title_arr.next().value]] = objArr[i];
						}
						data.push(obj);
						title_arr = title.keys();
					}
				}
				console.log(data)
				return data;
			},
			//电路动画结束
			stop() {
				this.isEdit = 'true';
				this.isRun = false;
				let isRun = this.isRun;
				this.linkAnimation(isRun)
			},
			//初始化电路图
			init() {
				// if (window.goSamples) goSamples();
				let _this = this;
				//设置容器
				_this.myDiagram = $(
					go.Diagram,
					'myDiagramDiv', {
						initialContentAlignment: go.Spot.Center,
						scrollMode: go.Diagram.DocumentScroll,
						initialPosition: new go.Point(0, 0),
						allowHorizontalScroll: false,
						allowVerticalScroll: false,
						"animationManager.isEnabled": false,
						autoScale: go.Diagram.None,
						// "dragSelectingTool.isEnabled" : false, 
						"toolManager.mouseWheelBehavior": go.ToolManager.WheelNone,
						initialAutoScale: go.Diagram.Uniform,
						// ChangedSelection: onSelectionChanged,
						'draggingTool.gridSnapCellSize': new go.Size(10, 1),
						'draggingTool.isGridSnapEnabled': true,
						'undoManager.isEnabled': true,
						//绑定动态数据
						ModelChanged: function(e) {
							if (e.isTransactionFinished) {
								document.getElementById('mySavedModel').textContent = e.model.toJson();
								_this.textContent = JSON.parse(e.model.toJson());
								_this.getSelect();
								let allData = _this.textContent.nodeDataArray;
							}
						},
						//单击元器件
						ObjectSingleClicked: function(e) {
							_this.getSelect(e)
						},
						//双击元器件
						ObjectDoubleClicked: function() {
							var nodeOrLinkList = _this.myDiagram.selection;
							nodeOrLinkList.each(function(nodeOrLink) {
								if (nodeOrLink instanceof go.Node) {
									if (nodeOrLink.data.icon == 'chargeStation') {
										// _this.dialogVisible = true;
										_this.dialogInfo = nodeOrLink.data;
										_this.$router.push({
											path: '/carExperiment'
										})
									} else if (nodeOrLink.data.icon == 'guidao') {
										_this.$router.push({
											path: '/metroExper'
										})
									}
								}
							})
						},
						//单击背景
						BackgroundSingleClicked: function() {
							_this.modelParameterData = []
						},

						LinkDrawn: function(e) {
							// console.log(e)
						},
					}
				);
				//监听画线
				this.myDiagram.addDiagramListener("LinkDrawn", function(e) {

					let fromKey = e.subject.fromNode.key;
					let toKey = e.subject.toNode.key;

					let data = _this.textContent.nodeDataArray;
					e.subject.data.modelParameter = [{
						"name": "线路类型",
						"value": "",
						"unit": "",
						"isShow": "否"
					}, {
						"name": "相",
						"value": "ABC",
						"unit": "",
						"isShow": "否"
					}, {
						"name": "长度",
						"value": "1",
						"unit": "mile",
						"isShow": "否"
					}, {
						"name": "z11",
						"value": "0.3465+1.0179j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z12",
						"value": "0.1560+0.5017j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z13",
						"value": "0.1580+0.4236j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z21",
						"value": "0.1560+0.5017j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z22",
						"value": "0.3375+1.0478j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z23",
						"value": "0.1535+0.3849j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z31",
						"value": "0.1580+0.4236j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z32",
						"value": "0.1535+0.3849j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "z33",
						"value": "0.3414+1.0348j",
						"unit": "Ω/英里",
						"isShow": "否"
					}, {
						"name": "首端节点",
						"value": e.subject.fromNode.key,
						"unit": "",
						"isShow": "否"
					}, {
						"name": "末端节点",
						"value": e.subject.toNode.key,
						"unit": "",
						"isShow": "否"
					}, {
						"value": "line",
						"isShow": "否",
						"index": 0,
						"properties": "标签"
					}, {
						"value": "架空线路/地下电缆",
						"isShow": "否",
						"index": 1,
						"properties": "名称"
					}, ]
					//动态修改整个textContent的fromKey
					for (let i = 0; i < data.length; i++) {
						let nodeFromKey = _this.myDiagram.model.findNodeDataForKey(fromKey);
						let modelLists = _this.textContent.nodeDataArray[i].modelParameter;
						if (toKey == data[i].key) {
							let nodeToKey = _this.myDiagram.model.findNodeDataForKey(toKey);
							for (let j = 0; j < modelLists.length; j++) {

								if (data[i].icon == 'duanlu') {
									if (modelLists[j].name == '首端节点') {
										modelLists[j].value = "母线" + i + "a";
										e.subject.data.modelParameter[13].value = "母线" + i + "a";
									}
								} else if (data[i].icon == 'transformer') {
									setTimeout(function() {
										if (modelLists[j].name == '首端节点') {
											modelLists[j].value = e.subject.data.modelParameter[12].value
										}
									}, 100)
								} else {
									if (modelLists[j].name == '连接于') {
										modelLists[j].value = fromKey
									} else if (modelLists[j].name == '首端节点') {
										modelLists[j].value = fromKey;
										console.log(fromKey)
									}
								}
							}
							_this.myDiagram.model.setDataProperty(nodeToKey, 'modelParameter', modelLists); //然后对这个对象的属性进行更改
						}
						if (fromKey == data[i].key) {
							console.log(fromKey, data[i].icon)
							let nodeFromKey = _this.myDiagram.model.findNodeDataForKey(fromKey);

							for (let j = 0; j < modelLists.length; j++) {
								if (data[i].icon == 'duanlu') {
									if (modelLists[j].name == '末端节点') {
										modelLists[j].value = "母线" + i + "b";
										e.subject.data.modelParameter[12].value = "母线" + i + "b";
									}
								} else if (data[i].icon == 'transformer') {
									setTimeout(function() {
										if (modelLists[j].name == '末端节点') {
											modelLists[j].value = e.subject.data.modelParameter[13].value
										}
									}, 100)
								} else {
									if (modelLists[j].name == '末端节点') {
										modelLists[j].value = toKey
									}
								}
							}
							_this.myDiagram.model.setDataProperty(nodeFromKey, 'modelParameter', modelLists);
						}
					}
					//线路自带属性
				});
				this.myDiagram.model =
					$(go.GraphLinksModel, {
						linkFromPortIdProperty: "fromPort",
						linkToPortIdProperty: "toPort",
						nodeDataArray: [],
						linkDataArray: []
					});
			},
			//获取选中的节点
			getSelect(e) {
				let _this = this;
				let fromNode = null;
				let fromNodeKey = null;
				let toNode = null;
				let toNodeKey = null;
				var nodeOrLinkList = this.myDiagram.selection;
				nodeOrLinkList.each(function(nodeOrLink) {
					if (nodeOrLink instanceof go.Node) { //获取选中节点
						_this.icon = nodeOrLink.data.icon;
						_this.text = nodeOrLink.data.text;
						// _this.pos = nodeOrLink.data.pos;
						_this.keyValue = nodeOrLink.data.key;
						_this.modelParameterData = nodeOrLink.data.modelParameter;
					} else if (nodeOrLink instanceof go.Link) { //获取选中的连线
						_this.icon = 'link'
						_this.modelParameterData = nodeOrLink.data.modelParameter;
						_this.linkData = nodeOrLink.data;
						// var from = nodeOrLink.data.from;
						// var to = nodeOrLink.data.to;
					}
				});
			},
			//右键菜单
			cxcommand(val) {
				let _this = this;
				//旋转事件函数
				function rotate(angle) {
					var nodeOrLinkList = _this.myDiagram.selection;
					nodeOrLinkList.each(function(nodeOrLink) {
						if (nodeOrLink instanceof go.Node) { //获取选中节点
							console.log(nodeOrLink)
							nodeOrLink.angle += 45
						}
					});
				}
				var diagram = _this.myDiagram;
				switch (val) {
					case "cut":
						diagram.commandHandler.cutSelection();
						break;
					case "copy":
						diagram.commandHandler.copySelection();
						break;
					case "paste":
						diagram.commandHandler.pasteSelection(diagram.toolManager.contextMenuTool.mouseDownPoint);
						break;
					case "delete":
						diagram.commandHandler.deleteSelection();
						break;
					case "rotate":
						rotate();
						break;
				}
				diagram.currentTool.stopTool();
			},
			//节点样式设置
			nodeStyle() {
				let _this = this;

				function geoFunc(geoname) {
					let geo = _this.nodes[geoname];
					return geo;
				};

				function getname(data) {
					console.log(data.icon)
					if (data.icon == 'node') {
						return 'Picture'
					} else {
						return 'null'
					}
				};

				function geohover(geoname) {
					let geo = _this.hoverIcons[geoname];
					return geo;
				};

				function portStyle() {
					return {
						fill: "transparent",
						// toMaxLinks: 1,
						cursor: "pointer",
						stroke: null
					}
				};

				function leftRightWidth(type) {
					let portType = type.type
					if (portType == "leftRight") return 10;
					return 0;
				};

				function threeWidth(type) {
					let portType = type.type
					if (portType == "three") return 10;
					return 0;
				};

				function topBottomWidth(type) {
					let portType = type.type
					if (portType == "topBottom") return 10;
					return 0;
				};

				function topWidth(type) {
					let portType = type.type
					if (portType == "top") return 5;
					return 0;
				};

				function leftRightLink(type) {
					let portType = type.type
					if (portType == "leftRight") return true;
					return false;
				}

				function threeLink(type) {
					let portType = type.type
					if (portType == "three") return true;
					return false;
				}

				function topBottomLink(type) {
					let portType = type.type;
					if (portType == "topBottom") return true;
					return false;
				}

				function topLink(type) {
					let portType = type.type
					if (portType == "top") return true;
					return false;
				}

				function showSmallPorts(node, show) {
					node.ports.each(function(port) {
						if (port.portId !== "") { // don't change the default port, which is the big shape
							port.fill = show ? "red" : null;
						}
					});
				}

				function setStrokeWidth(data) {
					if (data.fromPort == 'in1') {
						return 5
					} else if (data.fromPort == 'in2') {
						return 8
					} else {
						return 11
					}
				}

				function setName(data) {
					// console.log(data)
					if (data.fromPort == 'in1') {
						return "PIPE"
					} else if (data.fromPort == 'in2') {
						return 'PIPE1'
					} else {
						return 'PIPE2'
					}
				}

				function visible(data) {
					let portType = data.type
					if (portType == "three" || portType == 'leftRight' || portType == 'mid' || portType == 'topBottom') return false;
					return true;
				}

				function visibleLR(data) {
					let portType = data.type
					if (portType == 'leftRight') return true;
					return false;
				}

				function setText(data) {
					if (data.icon == 'node') {
						let tt = _this.textContent.nodeDataArray.length + 1;
						let ttString = tt.toString()
						return ttString;
						console.log(ttString)
					}
				}

				var cxElement = document.getElementById("contextMenu");
				var myContextMenu = $(go.HTMLInfo, {
					show: showContextMenu,
					hide: hideContextMenu
				});

				function hideCX() {
					if (_this.myDiagram.currentTool instanceof go.ContextMenuTool) {
						_this.myDiagram.currentTool.doCancel();
					}
				}
				//设置右键菜单样式
				_this.myDiagram.contextMenu = myContextMenu;
				cxElement.addEventListener("contextmenu", function(e) {
					e.preventDefault();
					return false;
				}, false);
				// 右键菜单显示
				function showContextMenu(obj, diagram, tool) {
					var cmd = diagram.commandHandler;
					var hasMenuItem = false;

					function maybeShowItem(elt, pred) {
						if (pred) {
							elt.style.display = "block";
							hasMenuItem = true;
						} else {
							elt.style.display = "none";
						}
					}
					maybeShowItem(document.getElementById("cut"), cmd.canCutSelection());
					maybeShowItem(document.getElementById("copy"), cmd.canCopySelection());
					maybeShowItem(document.getElementById("paste"), cmd.canPasteSelection(diagram.toolManager.contextMenuTool.mouseDownPoint));
					maybeShowItem(document.getElementById("delete"), cmd.canDeleteSelection());
					maybeShowItem(document.getElementById("rotate"), cmd.canDeleteSelection());
					if (hasMenuItem) {
						cxElement.classList.add("show-menu");
						var mousePt = diagram.lastInput.viewPoint;
						cxElement.style.left = mousePt.x + 5 + "px";
						cxElement.style.top = mousePt.y + "px";
					}
					window.addEventListener("click", hideCX, true);
				}
				//右键菜单隐藏
				function hideContextMenu() {
					cxElement.classList.remove("show-menu");
					window.removeEventListener("click", hideCX, true);
				}

				//连线节点图标设置
				this.myDiagram.nodeTemplate = $(
					go.Node, {
						locationSpot: go.Spot.Center,
						// rotatable: true,
						resizable: true,
						resizeObjectName: "Picture", // resize the Shape, not the Node
						selectionObjectName: "Picture",
						cursor: 'pointer',
						locationObjectName: "Picture",
						contextMenu: myContextMenu
					},
					'Spot', {
						locationObjectName: 'PORT',
					},
					new go.Binding('location', 'pos', go.Point.parse).makeTwoWay(go.Point.stringify),
					new go.Binding("angle").makeTwoWay(),
					$(
						go.Panel,
						"Table", {
							// width: 50,
							// minSize: new go.Size(20, 20),
						},
						//负荷上的线
						$(
							go.Shape, "LineV", {
								isPanelMain: true,
								stroke: '#2bd8f1',
								height: 60,
								alignment: go.Spot.Top,
								// alignmentFocus: new go.Spot(0.5,1),
								strokeWidth: 4,
							},
							new go.Binding("visible", visible),
						),
						$(go.Shape, "LineV", {
								alignment: go.Spot.Top,
								stroke: 'red',
								height: 40,
								strokeWidth: 5,
								angle: 180,
								name: 'PIPE',
								isPanelMain: true,
								strokeDashArray: [6, 20],
								strokeCap: 'round',
								visible: false
							},
							// new go.Binding("visible", visible),
							new go.Binding("strokeWidth", setStrokeWidth),
							new go.Binding("name", setName)
						),
						//左右线
						$(
							go.Shape, "MinusLine", {
								isPanelMain: true,
								stroke: '#2bd8f1',
								height: 60,
								alignment: new go.Spot(0.5, 0.6),
								// alignmentFocus: new go.Spot(0.5,1),
								strokeWidth: 4,
							},
							new go.Binding("visible", visibleLR),
						),
						$(go.Shape, "MinusLine", {
								alignment: new go.Spot(0.5, 0.6),
								stroke: 'red',
								height: 40,
								strokeWidth: 5,
								angle: 180,
								name: 'PIPE',
								isPanelMain: true,
								strokeDashArray: [6, 20],
								strokeCap: 'round',
								visible: false
							},
							// new go.Binding("visible", visible),
							new go.Binding("strokeWidth", setStrokeWidth),
							new go.Binding("name", setName)
						),
						$(go.Picture, {
								name: "Picture",
								margin: new go.Margin(30, 20, 20, 20),
								// maxSize: new go.Size(1000, 100),
								// minSize: new go.Size(40, 4)
							},
							new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
							new go.Binding("source", "icon", geoFunc),
							// new go.Binding("name", getname)
						),
						//左节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in9",
								alignment: new go.Spot(0.03, 0.55),
							},
							new go.Binding("fromLinkable", leftRightLink),
							new go.Binding("toLinkable", leftRightLink),
							new go.Binding("width", leftRightWidth),
							new go.Binding("height", leftRightWidth),
						),
						//右中节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in10",
								alignment: new go.Spot(0.97, 0.55),
							},
							new go.Binding("fromLinkable", leftRightLink),
							new go.Binding("toLinkable", leftRightLink),
							new go.Binding("width", leftRightWidth),
							new go.Binding("height", leftRightWidth)),
						//上下节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in3",
								alignment: new go.Spot(0.5, 0.28)
							},
							new go.Binding("fromLinkable", topBottomLink),
							new go.Binding("toLinkable", topBottomLink),
							new go.Binding("width", topBottomWidth),
							new go.Binding("height", topBottomWidth)),
						//上下节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in4",
								alignment: new go.Spot(0.49, 0.8),
								margin: new go.Margin(-1, 0, 0, 0),
							},
							new go.Binding("fromLinkable", topBottomLink),
							new go.Binding("toLinkable", topBottomLink),
							new go.Binding("width", topBottomWidth),
							new go.Binding("height", topBottomWidth)),
						//只有上节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in5",
								alignment: new go.Spot(0.5, 0)
							},
							new go.Binding("fromLinkable", topLink),
							new go.Binding("toLinkable", topLink),
							new go.Binding("width", topWidth),
							new go.Binding("height", topWidth)),
						//母线中间节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in6",
								fromLinkable: true,
								toLinkable: true,
								alignment: new go.Spot(0.5, 0.6)
							},
							new go.Binding("fromLinkable", threeLink),
							new go.Binding("toLinkable", threeLink),
							new go.Binding("width", threeWidth),
							new go.Binding("height", threeWidth)),
						//母线左节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in1",
								alignment: new go.Spot(0.2, 0.6),
								// fromSpot: go.Spot.Top,
								// toSpot: go.Spot.Top,
							},
							new go.Binding("fromLinkable", threeLink),
							new go.Binding("toLinkable", threeLink),
							new go.Binding("width", threeWidth),
							new go.Binding("height", threeWidth),
						),
						//母线右节点
						$(go.Shape, "Rectangle", portStyle(), {
								portId: "in2",
								alignment: new go.Spot(0.8, 0.6),
								// fromSpot: go.Spot.Top,
								// toSpot: go.Spot.Top,
							},
							new go.Binding("fromLinkable", threeLink),
							new go.Binding("toLinkable", threeLink),
							new go.Binding("width", threeWidth),
							new go.Binding("height", threeWidth)),
						$(
							go.TextBlock, {
								row: 1,
								font: 'Bold 14px Lato, sans-serif',
								textAlign: 'left',
								// margin: 20,
								stroke: "rgb(108,247,241)",
								maxSize: new go.Size(80, NaN),
								alignment: go.Spot.LeftCenter,
								alignmentFocus: go.Spot.LeftCenter,
								editable: false
							},
							new go.Binding('text', setText).makeTwoWay(),
							new go.Binding('text').makeTwoWay(),
						),
						new go.Binding("angle", "angle"),
					), {
						mouseEnter: function(e, node) {
							showSmallPorts(node, true);
						},
						mouseLeave: function(e, node) {
							showSmallPorts(node, false);
						}
					}
				);
			},
			//连线样式设置
			linkStyle() {
				let _this = this;

				function setStrokeWidth(data) {
					if (data.fromPort == 'in1') {
						return 5
					} else if (data.fromPort == 'in2') {
						return 8
					} else {
						return 11
					}
				}

				function setName(data) {
					if (data.fromPort == 'in1') {
						return "PIPE"
					} else if (data.fromPort == 'in2') {
						return 'PIPE1'
					} else {
						return 'PIPE2'
					}
				}

				function color() {
					return "red"
				}
				var linkSelectionAdornmentTemplate =
					$(go.Adornment, "Link",
						$(go.Shape, {
							isPanelMain: true,
							fill: null,
							stroke: "deepskyblue",
							strokeWidth: 0
						})
					);
				this.myDiagram.linkTemplate =
					$(
						go.Link, {
							selectable: true,
							selectionAdornmentTemplate: linkSelectionAdornmentTemplate
						}, {
							// routing: go.Link.AvoidsNodes, //避过节点
							// corner: 10,
							reshapable: true,
							resegmentable: true,
							selectable: true,
						},
						new go.Binding('fromSpot', 'fromSpot', go.Spot.parse),
						new go.Binding('toSpot', 'toSpot', go.Spot.parse),
						new go.Binding('points').makeTwoWay(),
						$(
							go.Shape, {
								isPanelMain: true,
								stroke: '#2bd8f1',
								strokeWidth: 2
							},
						),
						$(go.Shape, {
								stroke: 'red',
								// strokeWidth: 5,
								// name: 'PIPE',
								isPanelMain: true,
								strokeDashArray: [2, 100],
								strokeCap: 'round',
								visible: _this.isRun,
							},
							new go.Binding("strokeWidth", setStrokeWidth),
							new go.Binding("name", setName)
						),
						$(go.TextBlock, '', {
								font: "400 9pt Source Sans Pro, sans-serif",
								stroke: "rgb(108,247,241)",
								segmentOffset: new go.Point(0, -10),
								segmentOrientation: go.Link.OrientUpright,
								isMultiline: true,
								editable: false,
								textAlign: "center",
							},
							new go.Binding("text", 'text').makeTwoWay()
						)
					);
			},
			//侧边栏图标
			myPaletteDiv() {
				function geoFunc(geoname) {
					let geo = _this.icons[geoname];
					return geo;
				};
				let _this = this;
				let a = [];
				var palette = new go.Palette("myPaletteDiv");
				palette.layout = $(go.GridLayout, {
					cellSize: new go.Size(1, 1)
				});
				// palette.initialContentAlignment = go.Spot.TopLeft;
				palette.initialScale = 0.8
				palette.nodeTemplate = $(
					go.Node, "Auto", {
						locationSpot: go.Spot.LeftCenter,
						rotatable: true,
						resizable: true,
						resizeObjectName: "Picture", // resize the Shape, not the Node
						selectionObjectName: "Picture",
						cursor: 'pointer',
						locationObjectName: "Picture",
					},
					'Spot', {
						locationObjectName: 'PORT',
					},
					new go.Binding('location', 'pos', go.Point.parse).makeTwoWay(go.Point.stringify),
					$(
						go.Panel,
						"Table", {
							width: 90,
							// minSize: new go.Size(80, 80),
						},
						// $(go.TextBlock,{ text:'123',background:'transparent', row: 1,margin:10,alignment: go.Spot.Top,}),
						$(go.Picture, {
								name: "Picture",
								desiredSize: new go.Size(90, 140),
								margin: 5,
							},
							new go.Binding("source", "icon", geoFunc)),
					));
				palette.model = $(go.GraphLinksModel, {
					linkFromPortIdProperty: "fromPort",
					linkToPortIdProperty: "toPort",
					nodeDataArray: [{
							key: "电动汽车",
							icon: 'vehicle',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "充电类型",
								"value": "高",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "工作充电",
								"value": "是",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "充电效率",
								"value": "0.9",
								"unit": "",
								"isShow": "否",
								"index": 2
							}, {
								"name": "容量",
								"value": "10000",
								"unit": "KVA",
								"isShow": "否",
								"index": 3
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 4
							}, {
								"name": "数量",
								"value": "5",
								"unit": "辆",
								"isShow": "否",
								"index": 5
							}, {
								"name": "到站时间",
								"value": "9:20",
								"unit": "",
								"isShow": "否",
								"index": 6
							}, {
								"name": "到站时SOC",
								"value": "",
								"unit": "%",
								"isShow": "否",
								"index": 7
							}, {
								"name": "预计离站时间",
								"value": "10:30",
								"unit": "",
								"isShow": "否",
								"index": 8
							}, {
								"value": "",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "电动汽车",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}, ]
						},
						{
							key: "充电站",
							icon: 'chargeStation',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "相",
								"value": "ABC",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "A相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 2
							}, {
								"name": "B相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 3
							}, {
								"name": "C相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 4
							}, {
								"name": "基准电压",
								"value": "480",
								"unit": "V",
								"isShow": "否",
								"index": 5
							}, {
								"value": "",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "充电站",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "储能",
							icon: 'storage',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "电池模式",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "电池状态",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "功率因数",
								"value": "0",
								"unit": "",
								"isShow": "否",
								"index": 2
							}, {
								"name": "电池寄生功率损耗",
								"value": "0",
								"unit": "W",
								"isShow": "否",
								"index": 3
							}, {
								"name": "额定效率",
								"value": "0",
								"unit": "",
								"isShow": "否",
								"index": 4
							}, {
								"name": "最大电压",
								"value": "0",
								"unit": "V",
								"isShow": "否",
								"index": 5
							}, {
								"name": "最大电流",
								"value": "0",
								"unit": "A",
								"isShow": "否",
								"index": 6
							}, {
								"name": "最大有功功率",
								"value": "0",
								"unit": "W",
								"isShow": "否",
								"index": 7
							}, {
								"name": "最大能量",
								"value": "0",
								"unit": "Wh",
								"isShow": "否",
								"index": 8
							}, {
								"name": "储存能量",
								"value": "0",
								"unit": "Wh",
								"isShow": "否",
								"index": 9
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 10
							}, {
								"name": "相",
								"value": "ABCD",
								"unit": "",
								"isShow": "否",
								"index": 11
							}, {
								"name": "基准电压",
								"value": "2400",
								"unit": "V",
								"isShow": "否",
								"index": 12
							}, {
								"value": "",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "储能",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}, ]
						},
						{
							key: "普通负荷",
							icon: 'load',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "相",
								"value": "ABC",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "A相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 2
							}, {
								"name": "B相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 3
							}, {
								"name": "C相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 4
							}, {
								"name": "基准电压",
								"value": "480",
								"unit": "V",
								"isShow": "否",
								"index": 5
							}, {
								"value": "",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "普通负荷",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]

						},
						{
							key: "母线",
							icon: 'node',
							text: '',
							type: 'three',
							angle: '',
							modelParameter: [{
								"name": "节点类型",
								"value": "平衡节点",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "相",
								"value": "ABC",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "A相电压",
								"value": "0.00-28.8427j",
								"unit": "V",
								"isShow": "否",
								"index": 2
							}, {
								"name": "B相电压",
								"value": "0.00+28.8427j",
								"unit": "V",
								"isShow": "否",
								"index": 3
							}, {
								"name": "C相电压",
								"value": "0.00-28.8427j",
								"unit": "V",
								"isShow": "否",
								"index": 4
							}, {
								"name": "基准电压",
								"value": "400",
								"unit": "V",
								"isShow": "否",
								"index": 5
							}, {
								"value": "",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "母线",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "光伏",
							icon: 'photovoltaic',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "光伏模式",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "光伏状态",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "面板类型",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 2
							}, {
								"name": "效率",
								"value": "0.90",
								"unit": "",
								"isShow": "否",
								"index": 3
							}, {
								"name": "面积",
								"value": "10",
								"unit": "",
								"isShow": "否",
								"index": 4
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 5
							}, {
								"name": "相",
								"value": "ABCD",
								"unit": "",
								"isShow": "否",
								"index": 6
							}, {
								"name": "基准电压",
								"value": "10",
								"unit": "V",
								"isShow": "否",
								"index": 7
							}, {
								"value": "",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "光伏",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "柴油发电机",
							icon: 'generator',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "发电模式",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "发电机状态",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "发电机类型",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 2
							}, {
								"name": "功率因数",
								"value": "0.90",
								"unit": "",
								"isShow": "否",
								"index": 3
							}, {
								"name": "额定容量",
								"value": "1000",
								"unit": "VA",
								"isShow": "否",
								"index": 4
							}, {
								"name": "额定电压",
								"value": "400",
								"unit": "V",
								"isShow": "否",
								"index": 5
							}, {
								"name": "转速",
								"value": "3000",
								"unit": "1/min",
								"isShow": "否",
								"index": 6
							}, {
								"name": "力距",
								"value": "10",
								"unit": "N",
								"isShow": "否",
								"index": 7
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 8
							}, {
								"name": "相",
								"value": "ABCD",
								"unit": "",
								"isShow": "否",
								"index": 9
							}, {
								"name": "基准电压",
								"value": "10",
								"unit": "V",
								"isShow": "否",
								"index": 10
							}, {
								"name": "A相功率",
								"value": "",
								"unit": "W",
								"isShow": "否",
								"index": 11
							}, {
								"name": "B相功率",
								"value": "",
								"unit": "W",
								"isShow": "否",
								"index": 12
							}, {
								"name": "C相功率",
								"value": "",
								"unit": "W",
								"isShow": "否",
								"index": 13
							}, {
								"name": "最大功率",
								"value": "",
								"unit": "W",
								"isShow": "否",
								"index": 14
							}, {
								"name": "最小功率",
								"value": "",
								"unit": "W",
								"isShow": "否",
								"index": 15
							}, {
								"value": "",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "同步发电机",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "变压器",
							icon: 'transformer',
							text: '',
							type: 'leftRight',
							angle: '',
							modelParameter: [{
								"name": "相",
								"value": "ABC",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "连接方式",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "安装类型",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 2
							}, {
								"name": "总容量",
								"value": "500",
								"unit": "kVA",
								"isShow": "否",
								"index": 3
							}, {
								"name": "一次测电压",
								"value": "4160",
								"unit": "V",
								"isShow": "否",
								"index": 4
							}, {
								"name": "二次测电压",
								"value": "480",
								"unit": "V",
								"isShow": "否",
								"index": 5
							}, {
								"name": "电阻",
								"value": "0.011",
								"unit": "Ω",
								"isShow": "否",
								"index": 6
							}, {
								"name": "电抗",
								"value": "0.02",
								"unit": "Ω",
								"isShow": "否",
								"index": 7
							}, {
								"name": "首端节点",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 8
							}, {
								"name": "末端节点",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 9
							}, {
								"value": "Transformer1",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "变压器",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "风电",
							icon: 'windPower',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "风电状态",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "风电类型",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "风电模式",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 2
							}, {
								"name": "风电模型",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 3
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 4
							}, {
								"name": "相",
								"value": "ABC",
								"unit": "",
								"isShow": "否",
								"index": 5
							}, {
								"name": "基准电压",
								"value": "100",
								"unit": "V",
								"isShow": "否",
								"index": 6
							}, {
								"value": "windturb_dg1",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "风电",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "变电站",
							icon: 'biandian',
							text: '',
							type: 'top',
							angle: '90',
							modelParameter: [{
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"value": "TS",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "变电站",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "轨道交通",
							icon: 'guidao',
							text: '',
							type: 'top',
							angle: '',
							modelParameter: [{
								"name": "相",
								"value": "ABC",
								"unit": "",
								"isShow": "否",
								"index": 0
							}, {
								"name": "连接于",
								"value": "",
								"unit": "",
								"isShow": "否",
								"index": 1
							}, {
								"name": "A相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 2
							}, {
								"name": "B相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 3
							}, {
								"name": "C相功率",
								"value": "",
								"unit": "VA",
								"isShow": "否",
								"index": 4
							}, {
								"name": "基准电压",
								"value": "480",
								"unit": "V",
								"isShow": "否",
								"index": 5
							}, {
								"value": "guidao",
								"isShow": "否",
								"index": 0,
								"properties": "标签"
							}, {
								"value": "轨道",
								"isShow": "否",
								"index": 1,
								"properties": "名称"
							}]
						},
						{
							key: "断路器",
							icon: 'duanlu',
							text: '',
							type: 'topBottom',
							angle: '',
							modelParameter: [{
									"name": "相",
									"value": "ABC",
									"unit": "",
									"isShow": "否",
									"index": 0
								},
								{
									"name": "状态",
									"value": "",
									"unit": "",
									"isShow": "否",
									"index": 1
								},
								{
									"name": "首端节点",
									"value": "",
									"unit": "",
									"isShow": "否",
									"index": 2
								},
								{
									"name": "末端节点",
									"value": "",
									"unit": "",
									"isShow": "否",
									"index": 3
								}, {
									"value": "switch",
									"isShow": "否",
									"index": 0,
									"properties": "标签"
								}, {
									"value": "断路器",
									"isShow": "否",
									"index": 1,
									"properties": "名称"
								}
							]
						}
					] // end nodeDataArray
				})
				// _this.nodeStyle(a)
			},
			// 电路动画
			linkAnimation(isRun) {
				this.linkStyle()
				var myDiagrams = this.myDiagram;
				if (isRun) {
					myDiagrams.isReadOnly = true;
					var animation = new go.Animation();
					animation.easing = go.Animation.EaseLinear;
					myDiagrams.links.each(function(link) {
						if (link.findObject("PIPE")) {
							animation.add(link.findObject("PIPE"), "strokeDashOffset", 40, 0)
						} else if (link.findObject("PIPE1")) {
							animation.add(link.findObject("PIPE1"), "strokeDashOffset", 70, 0)
						} else {
							animation.add(link.findObject("PIPE2"), "strokeDashOffset", 100, 0)
						}
					});
					myDiagrams.nodes.each(function(link) {
						if (link.findObject("PIPE")) {
							animation.add(link.findObject("PIPE"), "strokeDashOffset", 20, 0)
						} else if (link.findObject("PIPE1")) {
							animation.add(link.findObject("PIPE1"), "strokeDashOffset", 20, 0)
						} else {
							animation.add(link.findObject("PIPE2"), "strokeDashOffset", 20, 0)
						}
					});
					animation.runCount = Infinity;
					animation.start();
				} else {
					myDiagrams.isReadOnly = false;
					var animation = new go.Animation();
					animation.easing = go.Animation.EaseLinear;
					myDiagrams.links.each(function(link) {
						if (link.findObject("PIPE")) {
							animation.add(link.findObject("PIPE"), "strokeDashOffset", 0, 0)
						} else if (link.findObject("PIPE1")) {
							animation.add(link.findObject("PIPE1"), "strokeDashOffset", 0, 0)
						} else {
							animation.add(link.findObject("PIPE2"), "strokeDashOffset", 0, 0)
						}
					});
					animation.runCount = Infinity;
					animation.start();
				}
			},
		}
	};
	function clone(obj) {
		if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
			return obj;

		if (obj instanceof Date)
			var temp = new obj.constructor(); //or new Date(obj);
		else
			var temp = obj.constructor();

		for (var key in obj) {
			if (Object.prototype.hasOwnProperty.call(obj, key)) {
				obj['isActiveClone'] = null;
				temp[key] = clone(obj[key]);
				delete obj['isActiveClone'];
			}
		}
		return temp;
	}
</script>
<style scoped>
	.wrapper {
		background-image: url(../../assets/img/background.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	#parentDiv {
		width: 100%;
		height: 100%;
		background-size: 15% 15%;
		background-position: left top;
		background-repeat: no-repeat;
	}

	#myDiagramDiv {
		/* border: solid 1px black; */
		width: 98% !important;
		height: 99% !important;
		border: none !important;
		display: inline-block;
		vertical-align: top;
	}
	
	#confirm{
		position: absolute;
		width:20px;
		left: 60px;
		top:45%;
		font-size: 20px;
		list-style: none;
		color:#f3f300
	}
	
	.header-title {
		padding-left: 10px;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 600;
		background: #c2dbf2;
		/* border: 1px solid #000; */
		border-right: none;
	}

	.content {
		/* border-left: 1px solid #000; */
	}

	#myDiagramDiv>>>canvas {
		outline: none;
	}

	.ctxmenu {
		display: none;
		position: absolute;
		opacity: 0;
		margin: 0;
		padding: 8px 0;
		z-index: 999;
		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
		list-style: none;
		background-color: #ffffff;
		border-radius: 4px;
	}

	.menu-item {
		display: block;
		position: relative;
		min-width: 60px;
		margin: 0;
		padding: 6px 16px;
		font: bold 12px sans-serif;
		color: rgba(0, 0, 0, .87);
		cursor: pointer;
	}

	.menu-item::before {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
		content: "";
		width: 100%;
		height: 100%;
		background-color: #000000;
	}

	.menu-item:hover::before {
		opacity: .04;
	}

	.menu .menu {
		top: -8px;
		left: 100%;
	}

	.show-menu,
	.menu-item:hover .ctxmenu {
		display: block;
		opacity: 1;
	}

	.legend {
		background-image: url(../../assets/img/home/legend.png);
		background-size: 100% 100%;
		background-color: transparent;
		height: 100px;
		width: 60px;
		border: none;
		color: rgb(178, 235, 248);
		position: absolute;
		right: 12px;
		bottom: 50px;
		z-index: 200;
		cursor: pointer;
	}

	.legend:hover {
		background-image: url(../../assets/img/home/legend_click.png);
		height: 100px;
		width: 95px;
		z-index: 200;
		cursor: pointer;
	}

	#contextMenu {
		background-color: rgb(178, 235, 248);
	}
</style>
<style>
	body .el-loading-spinner .el-loading-text,
	body .el-loading-spinner i {
		font-size: 30px !important;
	}

	.el-message-box {
		background-image: url(../../assets/img/home/error.png);
		background-size: 100% 100%;
		background-color: transparent;
		border: none
	}

	.el-message-box__close.el-icon-close {
		color: rgb(93, 237, 231);
		font-size: 20px
	}

	.el-message-box__content {
		padding: 40px 20px;
	}

	.el-message-box__close.el-icon-close:hover {
		color: rgb(9, 142, 255)
	}

	.el-message-box__message {
		color: rgb(93, 237, 231);
	}

	.el-button.el-button--default.el-button--small.el-button--primary {
		background-color: rgb(9, 142, 255)
	}
</style>
